<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:class="{ active: isActive }"> active: isActive </div>
        <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">static active: isActive, 'text-danger': hasError </div>

        <!-- 未内联在模板里的class -->
        <div v-bind:class="classObject">No module Object</div>

        <!-- Computed Object -->
        <div v-bind:class="classObjectCom">Computed Object</div>

        <!-- 数组渲染，直接从data取出值 -->
        <div v-bind:class="[activeClass, errorClass]">数组渲染</div>

        <!-- 数组中使用对象语法 -->
        <div v-bind:class="[{ active: isActive }, errorClass]">数组中使用对象语法</div>

        
    </div>
    <script src="vue.js"></script>
</body>
</html>